<template>
  <el-card>
    <el-form :inline="true">
      <el-row>
        <el-col :span="8">
          <el-form-item label="一级分类">
            <el-select :disabled="scene !== 0" v-model="categoryStore.c1Id" @change="getC2">
              <el-option v-for="c1 in categoryStore.c1Arr" :label="c1.name" :value="c1.id" :key="c1.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="二级分类">
            <el-select :disabled="scene !== 0" v-model="categoryStore.c2Id" @change="getC3">
              <el-option v-for="c2 in categoryStore.c2Arr" :label="c2.name" :value="c2.id" :key="c2.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="三级分类">
            <el-select :disabled="scene !== 0" v-model="categoryStore.c3Id">
              <el-option v-for="c3 in categoryStore.c3Arr" :label="c3.name" :value="c3.id" :key="c3.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'
  import useCategoryStore from '@/store/modules/category.ts'

  defineProps({
    scene: {
      type: Number,
      default: 0,
    },
  })

  const categoryStore = useCategoryStore()
  onMounted(() => {
    getC1()
  })

  function getC1() {
    categoryStore.getC1()
  }

  function getC2(selC1Id: number) {
    categoryStore.getC2(selC1Id)
  }

  function getC3(selC2Id: number) {
    categoryStore.getC3(selC2Id)
  }
</script>

<style lang="scss" scoped>
  .el-form--inline .el-form-item {
    width: 100%;
    .el-select {
      width: 90%;
    }
  }
</style>
